<template>
  <div class="search">
    <ul>
        <li id="seali1"><img src="../../assets/img/1/logo.png" alt=""></li>
        <li id="seali2">
            <div id="seali2div">
                <input type="text" placeholder="请输入关键字进行搜索">
                <button></button>
            </div>
            <div>
                <ul>
                    <li>热门：</li>
                    <li>奇异果</li>
                    <li>牛排</li>
                    <li>山竹</li>
                    <li>牛油果</li>
                 </ul>
            </div>
        </li>
        <li id="seali3">
            <div>
                <button>个人中心</button>
            </div>
            <div>
                <button>购物车</button>
            </div>
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    name: "search",
}
</script>

<style>
.search{
    width: 100%;
    position: relative;
    
}
.search ul li{
    float: left;
    height:130px;
    background: red;
}
#seali1{
    width: 33%;
    text-align: center;
}
#seali1 img{
    width: 80%;
    margin-top:30px; 
}
#seali2{
    width: 34%;
}
#seali2 div{
    width: 450px;
    border: 1px solid;
}
#seali2div{
    margin-top:50px; 
    height: 40px;
}
#seali2 input{
    width: 400px;
    border: none;
    height: 100%;
    float: left;
}
#seali2 button {
    border: none;
    float: left;
    height: 100%;
    width: 50px;
    background: yellow;
}
#seali3{
    width: 33%;
    
}
#seali3 button{
    margin-top:50px; 
    float: left;
    width: 120px;
    height: 40px;
    border: 1px solid #ccc;
    background: #aaa;
    margin-left: 30px; 
}
</style>



